<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>操作设备</title>
    <link rel="stylesheet" href="/static/css/weui.css" />
    <link rel="stylesheet" href="/static/css/example.css" />
    <style type="text/css">
        .center-in-center {
            position: absolute;
            top: 35%;
            left: 25%;
        }
        
        .center-in-top0 {
            position: absolute;
            top: 2%;
            left: 20%;
        }

        .center-in-top1 {
            position: absolute;
            top: 5%;
            left: 20%;
        } 

        .center-in-top2 {
            position: absolute;
            top: 8%;
            left: 20%;
        } 

        .center-in-top3 {
            position: absolute;
            top: 13%;
            left: 20%;
        }

        .center-in-top4 {
            position: absolute;
            top: 18%;
            left: 20%;
        }
        
        .center-in-bottom {
            position: absolute;
            top: 40%;
            left: 20%;
            height: 15%;
            width :60%;
        }
        .center-in-bottom2 {
            position: absolute;
            top: 50%;
            left: 20%;
            height: 15%;
            width :60%;
        }
        .center-in-bottom3  {
            position: absolute;
            top: 60%;
            left: 20%;
            height: 15%;
            width :60%;
        }
    </style>
</head>

<body ontouchstart>
    <div class="container" id="container"></div>
    <script type="text/html" id="tpl_home">
        <div class="page">


            <div style='background-color: rgba(0,0,0,0.1); padding-top: 5%; padding-left: 3%; padding-right: 3%;'>
                <h4 style="text-align: center; color: rgb(176,196,222);">设备状态监控</h4>
                <div class="weui-form-preview__bd">
                    <div class="weui-form-preview__item">
                        <label class="weui-form-preview__label">设备编号</label>
                        <span id='deviceid' class="weui-form-preview__value">123123123123123</span>
                    </div>
                    <div class="weui-form-preview__item">
                        <label class="weui-form-preview__label">社区名称</label>
                        <span id='commuName' class="weui-form-preview__value">天安门广场</span>
                    </div>
                    <div class="weui-form-preview__item">
                        <label class="weui-form-preview__label">社区地址</label>
                        <span id='commuAdd' class="weui-form-preview__value">浙江省杭州市余杭区临平镇上某个地点</span>
                    </div>
                    <div class="weui-form-preview__item">
                        <label class="weui-form-preview__label">设备状态</label>
                        <span id='status' class="weui-form-preview__value">正常</span>
                    </div>
                    <div class="weui-form-preview__item">
                        <label class="weui-form-preview__label">设备容积</label>
                        <span id='usedVol' class="weui-form-preview__value">50</span>
                    </div>
                    <div class="weui-form-preview__item">
                        <label class="weui-form-preview__label">最大容积</label>
                        <span id='maxVol' class="weui-form-preview__value">100</span>
                    </div>
                </div>
            </div>



            <div class="center-in-bottom">
                <a class="weui-btn weui-btn_primary" style="width:100%" href="javascript:" id="openDoor">开门</a>
            </div>

            <div class="center-in-bottom2">
                <a class="weui-btn weui-btn_primary" style="width:100%" href="javascript:" id="closeDoor">关门</a>
            </div>

            <div class="center-in-bottom3">
                <a class="weui-btn weui-btn_primary" style="width:100%" href="javascript:" id="stop">停止</a>
            </div>

            <div id="loadingToast" style="opacity: 0; display: none;">
                <div class="weui-mask_transparent"></div>
                <div class="weui-toast">
                    <i class="weui-loading weui-icon_toast"></i>
                    <p class="weui-toast__content" id="flag">设备开门中</p>
                </div>
            </div>

            <div id="loadingToast1" style="opacity: 0; display: none;">
                <div class="weui-mask_transparent"></div>
                <div class="weui-toast">
                    <i class="weui-loading weui-icon_toast"></i>
                    <p class="weui-toast__content" id="flag">设备关门中</p>
                </div>
            </div>


            <div class="weui-footer weui-footer_fixed-bottom">
            <p class="weui-footer__links">
                <p class="weui-footer__link">访问官网</p>
                <a href="http://www.zjnnhj.com" class="weui-footer__link">zjnnhj@zjnnhj.com</a>
            </p>
            <p class="weui-footer__links">
                <p class="weui-footer__link">联系我们</p>
                <a href="http://www.zjnnhj.com" class="weui-footer__link">18106532996</a>
            </p>
            <p class="weui-footer__text">Copyright © 2020 牛能环保</p>
        </div>
        </div>


        <script src="/static/js/jquery.min.js"></script>
        <script src="/static/js/weui.min.js"></script>
        <script type="text/javascript" src="/static/js/jweixin-1.4.0.js"></script>
        <script src="/static/js/zepto.min.js"></script>
        <script src="/static/js/example.js"></script>



        <script type="text/javascript">
            $(function() {

                function getQueryString(name) {
                    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                    var r = decodeURI(window.location.search).substr(1).match(reg);
                    if (r != null) return (r[2]);
                    return null;
                };


                $(document).ready(function() {
                    // 获取code
                    var code = getQueryString('code');
                    var carbinId = getQueryString('carbinId');
                    var commuName = getQueryString('commuName');
                    var commuAdd = getQueryString('commuAdd');
                    var usedVol = getQueryString('usedVol');
                    var maxVol = getQueryString('maxVol');
                    var status = getQueryString('status');
                    var area = getQueryString('area');
                    var flag = getQueryString('flag');

                    console.log('---------flag----------');
                    console.log(flag);
                    console.log(flag == 'openwait');
                    console.log(flag == 'closewait');

                    // 将开门按钮置灰
                    if (flag == 'openwait'){
                        $('#openDoor').attr('disabled', true).css("pointer-events","none");
                        $('#openDoor').removeClass('weui-btn_primary');
                        setTimeout(function(){
                            // 禁用按钮8s
                            $('#openDoor').removeAttr('disabled');
                            $('#openDoor').addClass('weui-btn_primary');
                        }, 5000);
                        

                    }
                    if (flag == 'closewait'){
                        $('#closeDoor').attr('disabled', true).css("pointer-events","none");
                        $('#closeDoor').removeClass('weui-btn_primary');
                        setTimeout(function(){
                            // 禁用按钮8s
                            $('#closeDoor').removeAttr('disabled');
                            $('#closeDoor').addClass('weui-btn_primary');
                        }, 5000);
                        

                    }

                    // 填充值
                    var a=document.getElementById ("deviceid");
                    a.innerHTML = carbinId;
                    var b=document.getElementById ("commuName");
                    b.innerHTML = commuName;
                    var c=document.getElementById ("commuAdd");
                    c.innerHTML = commuAdd;
                    var d=document.getElementById ("usedVol");
                    d.innerHTML = usedVol;
                    var e=document.getElementById ("maxVol");
                    e.innerHTML = maxVol;
                    var f=document.getElementById ("status");
                    f.innerHTML = status;

        
                    var $loadingToast = $('#loadingToast');
                    $('#openDoor').on('click', function(){
                        if ($loadingToast.css('display') != 'none') return;
                        var fredirect_uri = 'http://gzh.zjnnhj.com/niuneng/opendoor.html?carbinId=' + carbinId + '&commuName=' + commuName + '&commuAdd=' + commuAdd + '&usedVol=' + usedVol + '&maxVol=' + maxVol + '&status=' + status + '&area=' + area;
                        var ffurl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx5f2850581e4e064d&redirect_uri=" + encodeURIComponent(fredirect_uri) + "&response_type=code&scope=snsapi_base&state=123#wechat_redirect";
                        location.href = ffurl;  
                    });

                    $('#closeDoor').on('click', function(){
                        if ($loadingToast.css('display') != 'none') return;
                        var fredirect_uri = 'http://gzh.zjnnhj.com/niuneng/closedoor.html?carbinId=' + carbinId + '&commuName=' + commuName + '&commuAdd=' + commuAdd + '&usedVol=' + usedVol + '&maxVol=' + maxVol + '&status=' + status + '&area=' + area;
                        var ffurl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx5f2850581e4e064d&redirect_uri=" + encodeURIComponent(fredirect_uri) + "&response_type=code&scope=snsapi_base&state=123#wechat_redirect";
                        location.href = ffurl;  
                    });


                    $('#stop').on('click', function(){
                        if ($loadingToast.css('display') != 'none') return;
                        var fredirect_uri = 'http://gzh.zjnnhj.com/niuneng/pause.html?carbinId=' + carbinId + '&commuName=' + commuName + '&commuAdd=' + commuAdd + '&usedVol=' + usedVol + '&maxVol=' + maxVol + '&status=' + status + '&area=' + area;
                        var ffurl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx5f2850581e4e064d&redirect_uri=" + encodeURIComponent(fredirect_uri) + "&response_type=code&scope=snsapi_base&state=123#wechat_redirect";
                        location.href = ffurl;  
                    });


                    




                    });

                        
                    });
        </script>

    </script>
</body>

</html>